<template>
   <!-- 头部部分 -->
   <header class="header">
      <h1>todos</h1>
      <!-- trim去除前面空格 -->
      <!-- autofocus自动捕获焦点 -->
      <input class="new-todo" 
      placeholder="请输入任务名称"
       autofocus 
       @keyup.enter="addList"
       v-model.trim="todoName"  
       />
    </header>
</template>
 
<script>

export default {
  name: "TaiTou",

  props: {},
  data() {
    return {
      todoName:''
    }
  },
  methods: {
    
    // 添加事件
    addList() {
      // 判断if里面的是true还是false。因为空的false加!变成true，然后return出去
      if(!this.todoName) return alert('输入不能为空')
      // 子传父，告诉父要添加了
      this.$emit('addList',this.todoName)
      this.todoName=''
     }
  }
};
</script>

<style scoped>
     
</style>